<style type="text/css">
	#video{margin:0 auto;}
	.bg-white{background: white;}
	.content{margin: 20px;padding: 10px}
	.right h2{margin-top: 20px}
	.right .info div{margin-bottom: 10px;color: #585858}
	.a-data-path{cursor:pointer;}
</style>
<div class="content bg-white">
	<h2 class="title">--</h2>
	<hr class="layui-bg-red">

	<div class="layui-row layui-col-space30">
		<div class="layui-col-md9">
			<div class="video bg-white">
				<!-- <div id="video" style="width:100%;height:500px;"></div> -->
				<iframe id='iframe-content' frameborder="0" src="" style="width:100%;height:calc(100% - 110px);border: 1px solid #e5e5e5">
					
				</iframe>
			</div>
		</div>
		<div class="layui-col-md3">
			<div class="right">
				<button type="button" id="big-window" class="layui-btn layui-btn-fluid">大窗口模式查看</button>

				<h2>文件详情</h2>
				<hr>
				<div class="info">
					<div>--：--</div>
					<div>--：--</div>
					<div>--：--</div>
				</div>
				<div class="file-tool">
				
				</div>
				
				<h2 style="color: #ff5722">必看说明</h2>
				<hr>
				<div style="color: #585858">
					
					1.当前为浏览器直接预览方式打开。如果弹出下载框，则代表你的浏览器不支持打开该格式文件，建议直接下载到本地查看。

					<br><br>
					2.在某些情况下小窗口模式不支持一些功能（例如：ppt格式文件不能使用演示功能），请点击大窗口模式。

				</div>

				
				
				
			</div>
		</div>
	</div>	
</div>

<script type="text/javascript">
	layui.use(['jquery'],function(){
		var file_id=app.parseUrl(app.getUrl()).params.file_id,info_html=''
		var $=layui.jquery
		var eInfo=$('.info'),eTitle=$('.content .title');
		// var videoObject = {
		// 	container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
		// 	variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
		// 	flashplayer:false,//如果强制使用flashplayer则设置成true
		// 	// style:{logo:false},
		// 	video:'/source/file/file_id/'+ file_id +'/8/'+file_id +'.mp4'
		// }
		// var player=new ckplayer(videoObject);
		app.ajaxPost('/api/file/getInfoByFileId',{'fileId':file_id},function(data){
			eTitle.html(data.data.file_name)
			info_html+='<div>文件大小：'+app.bytesToSize(data.data.size)+'</div>'
			info_html+='<div data-path="'+data.data.path+'">文件目录：<a class="a-data-path" title="新窗口查看目录文件"> '+data.data.path+'</a></div>'
			info_html+='<div>更新时间：'+data.data.update_time+'</div>'
			eInfo.html(info_html)
			$("title").html(data.data.file_name+' - 在线预览');
			$('.a-data-path').click(function () {
				app.open('/index/file_list?path=' + $(this).parent().data('path'));
			})
		})
		app.runTpl('file_tool',{file_id:file_id,elem:'.file-tool'})
		$('#iframe-content').attr('src','/source/file?file_id='+file_id)
		// 监听大窗口模式打开
		$('#big-window').click(function(){
			location.href=('/source/file?file_id='+file_id)
		})
		
	})
	
</script>
